import '../css/todolistCom.scss'
import { Button } from 'antd';
import { useState,useContext } from 'react';
import ContextTodo,{ state } from "../store/contextTodo";//引入全局数据
const ListHooks = () => {
   // 使用钩子函数把数据勾过来（可以拿到父组件的数据）
   const context = useContext(ContextTodo)
  const [list, setList] = useState(state)

  // 删除
  const delList = (index) => {
    context.todoList.splice(index, 1)
    let listArr = list
    setList({
      list: listArr
    })
  }

  // 清空
  const delArr = () => {
    context.todoList.length = 0
    let listArr = list
    setList({
      ...list,
      list: listArr
    })
  }
  return (
    <>
      <div>
        <Button type="primary" danger onClick={delArr}>清空</Button>
        <table width={'400px'} height={'100px'} border={1} cellPadding={0} cellSpacing={0} >
          <tbody>
          <tr>
            <th>日期</th>
            <th>标题</th>
            <th>优先级</th>
            <th>操作</th>
          </tr>
          {
            context.todoList.length ? context.todoList.map((item, index) => {
              return (
                <tr key={index}>
                  <td align={'center'} className='span'>{item.date}</td>
                  <td align={'center'} className='span'>{item.title}</td>
                  <td align={'center'} className={[item.num==='1' ? 'num1'  : '' || item.num==='2' ? 'num2'  : '' || item.num==='3' ? 'num3'  : '']}>{item.num}</td>
                  <td align={'center'}><Button className='buttondel' type="primary" danger onClick={() => delList(index)}>删除</Button></td>
                </tr>
              )
            }) :<tr>
              <th colSpan={4}>没有更多数据了</th>
            </tr> 
          }
          </tbody>
        </table>
      </div>
    </>
  );
}

export default ListHooks;